<template>
  <div class="tab-set">
    <div class="tab-set__list" @click="linkHome">
      <i class="font_family icon-shouye"></i>
    </div>
    <div class="tab-set__list" @click="fullScreen">
      <i class="font_family icon-quanping"></i>
    </div>
    <div class="tab-set__list" @click="handleRefresh">
      <i class="font_family icon-shuaxinliebiao"></i>
    </div>
    <div class="tab-set__list">
      <el-dropdown trigger="click">
        <i class="font_family icon-xialacaidan"></i>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item class="tab-set__dropdown-item" @click="closeTab('current')">
              <i class="font_family icon-guanbidangqianbiaoqianye"></i>关闭当前标签页
            </el-dropdown-item>
            <el-dropdown-item class="tab-set__dropdown-item" @click="closeTab('left')">
              <i class="font_family icon-a-guanbizuocebiaoqianyegudingzailieshou"></i>关闭左侧标签页
            </el-dropdown-item>
            <el-dropdown-item class="tab-set__dropdown-item" @click="closeTab('right')">
              <i class="font_family icon-a-guanbiyoucebiaoqianyegudingzailiewei"></i>关闭右侧标签页
            </el-dropdown-item>
            <el-dropdown-item class="tab-set__dropdown-item" @click="closeTab('other')">
              <i class="font_family icon-guanbiqitabiaoqianye"></i>关闭其他标签页
            </el-dropdown-item>
            <el-dropdown-item class="tab-set__dropdown-item" @click="closeTab('all')">
              <i class="font_family icon-guanbisuoyoubiaoqianye"></i>关闭所有标签页
            </el-dropdown-item>
            <el-dropdown-item class="tab-set__dropdown-item">
              <div v-print="'#print-area'">
                <i class="font_family icon-dayindangqianyemian" v-print="printObj"></i
                >打印当前标签页
              </div>
            </el-dropdown-item>
            <el-dropdown-item class="tab-set__dropdown-item" @click="AddFavorite">
              <i class="font_family icon-shoucang"></i>收藏
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>
<script setup lang="ts">
import { defineEmits } from 'vue'
import { useMessage } from '@/hooks/message'
import { apiPageInsertBatch } from '@/api/modules/user.ts'
const printObj = {
  id: 'print-area',
  popTitle: '  ', // 打印配置页上方的标题
}

const emit = defineEmits(['linkHome', 'fullScreen', 'closeTab', 'handleRefresh'])
const linkHome = () => {
  emit('linkHome')
}
const fullScreen = () => {
  emit('fullScreen')
}
// 刷新页面
const handleRefresh = () => {
  emit('handleRefresh')
}
// 关闭tab
const closeTab = (type) => {
  emit('closeTab', type)
}

//加入收藏
const AddFavorite = () => {
  console.log('addfav----')
  const pageTitle = document.title
  const pageUrl = window.location.href
  const favoriteItem = { title: pageTitle, url: pageUrl }

  let favorites = JSON.parse(localStorage.getItem('favorites') || '[]')
  favorites.push(favoriteItem)
  localStorage.setItem('favorites', JSON.stringify(favorites))
  let pathName = window.location.pathname.split('/').pop()
  console.log('页面收藏成功：',pathName)
  apiPageInsertBatch([pathName])
    .then((res) => {
      if (res.success) {
        useMessage().success(res.message)
      }
    })
    .catch((error: any) => {})
}
</script>
<style lang="less">
.tab-set {
  display: flex;
  align-items: center;
  background: var(--el-bg-color);
  box-shadow: 1px 3px 4px 0px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  padding: 4px;

  .tab-set__list {
    width: 32px;
    height: 32px;
    border-radius: 2px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--el-text-color-placeholder);
    font-size: 17px;

    &:hover {
      background: var(--el-color-primary-light-9);
      border-radius: 6px;
      color: var(--el-color-primary);
    }
  }
  .el-dropdown {
    color: var(--el-text-color-placeholder);

    &:hover {
      background: var(--el-color-primary-light-9);
      border-radius: 6px;
      color: var(--el-color-primary);
    }
  }
  .tab-set__list + .tab-set__list {
    margin-left: 4px;
  }
}
.el-dropdown-menu {
  padding: 8px;
}

.tab-set__dropdown-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color: rgba(0, 0, 0, 0.85);
  height: 40px;
  border-radius: 4px;
  i {
    margin-right: 6px;
    font-size: 12px;
    color: #9f9f9f;
  }
  &:hover {
    background: var(--el-color-primary-light-8) !important;
    color: var(--el-color-primary) !important;
    i {
      color: var(--el-color-primary);
    }
  }
}
.tab-set__dropdown-item + .tab-set__dropdown-item {
  margin-top: 8px;
}
</style>
